<template>
    <div id='operate-auto-assign'>
       <!--  <h1 class="card-title">
           <p><span>自动分配管理</span></p>
       </h1> -->
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !info'>暂无数据</p>
        <div class="main" v-if='!loading && info'>
            <div class='detail-info'>
                <!-- 自动分配时段 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>自动分配时段</span>
                        <span @click='show_modal_time = true' class="button auto transparent tar">配置自动分配时段</span>
                    </div>

                    <div class="time">
                        <div class="time-item">
                            <span class='text'>开始</span>
                            <p class='big-number'>{{info.startTime || placeholder}}</p>
                        </div>
                        <div class="time-item">
                            <span class='text'>结束</span>
                            <p class='big-number'>{{info.endTime || placeholder}}</p>
                        </div>
                    </div>
                </div>

                <!-- 支持的借款周期 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>阻塞阈值</span>
                        <span @click='show_modal_block = true' class="button auto transparent tar">配置阻塞阈值</span>
                    </div>
                    <p class='big-number'>{{info.blockCount || placeholder}}</p>
                </div>

                <!-- 支持的借款周期 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>单次分配量</span>
                        <span @click='show_modal_allot = true' class="button auto transparent tar">配置单次分配量</span>
                    </div>
                    <p class='big-number'>{{info.allotCount || placeholder}}</p>
                </div>
            </div>
        </div>

        <modal 
            title='配置自动分配时段'
            :show='show_modal_time' 
            :loading='loading_save_time' 
            confirm-text='保存'
            @close='show_modal_time = false'
            @confirm='saveTime'>
            <div class="modal-form-wrap">
                <ul class="modal-form">
                    <li class='form-item'>
                        <span class="form-item__key">开始</span>
                        <div class="form-item__value">
                            <picker-time key='startDate' picker-id='startDate' v-model='startTime' default-value></picker-time>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">结束</span>
                        <div class="form-item__value">
                            <picker-time key='endDate' picker-id='endDate' v-model='endTime' default-value></picker-time>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置阻塞阈值'
            :show='show_modal_block' 
            :loading='loading_save_block' 
            confirm-text='保存'
            @close='show_modal_block = false'
            @confirm='saveBlock'>
            <div class="modal-form-wrap">
                <ul class="modal-form">
                    <li class='form-item'>
                        <span class="form-item__key">阻塞阈值</span>
                        <div class="form-item__value">
                            <input type="text" placeholder='请输入阻塞阈值' v-model='blockCount'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置单次分配量'
            :show='show_modal_allot' 
            :loading='loading_save_allot' 
            confirm-text='保存'
            @close='show_modal_allot=false'
            @confirm='saveAllot'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">单次分配量</span>
                        <div class="form-item__value">
                            <input type="text" placeholder='请输入阻塞阈值' v-model='allotCount'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import pickerDate from '../components/PickerDate.vue'
    import PickerTime from '../components/PickerTime.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { autoAllotApi, systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            pickerDate,
            PickerTime
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                show_modal_cycle:false,
                show_modal_block:false,
                show_modal_time:false,
                show_modal_allot:false,
                show_confirm_delete_limit:false,
                startDate:'',
                startTime:'',
                endTime:'',
                blockCount:'',
                allotCount:'',
                info:'',
                endDate:'',
                models:[],
                modelsSet:[],
                cycles:[],
                cyclesSet:[],
                limits:[],
                curLimit:{},
                placeholder:'--',
                loading:false,
                loading_model:false,
                loading_limits:false,
                loading_model:false,
                loading_save_block:false,
                loading_save_allot:false,
                loading_save_time:false,
                loading_save_cycles:false,
                loading_save_limits:false,
                loading_delete_limits:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            saveTime(){
                this.loading_save_time = true
                autoAllotApi.updateAllotTime({
                    startTime:this.startTime,
                    endTime:this.endTime
                })
                .then(result=>{
                    this.loading_save_time = false
                    this.show_modal_time = false
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_time = false
                })
            },
            saveBlock(){
                this.loading_save_block = true
                autoAllotApi.updateAllotBlockNum({
                    blockNum:this.blockCount,
                })
                .then(result=>{
                    this.loading_save_block = false
                    this.show_modal_block = false
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_block = false
                })
            },
            saveAllot(){
                this.loading_save_allot = true
                autoAllotApi.updateSingleAllotNum({
                    allotNum:this.allotCount,
                })
                .then(result=>{
                    this.loading_save_allot = false
                    this.show_modal_allot = false
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_allot = false
                })
            },
            getInfo(){
                this.loading = true
                autoAllotApi.info()
                .then(result=>{
                    this.info = result
                    this.startTime = result.startTime
                    this.endTime = result.endTime
                    this.allotCount = result.allotCount
                    this.blockCount = result.blockCount
                    this.loading = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading = false
                })
            },
        },
        created(){
            this.getInfo()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #operate-auto-assign{
        .time-item{
            display: flex;
            align-items: center;
            .text{
                display: block;
                font-size: 16px;
                font-weight: normal;
                color:$importColor;
            }
            padding: 5px 0;
        }
        .big-number{
            font-size: 26px;
            color:$green;
            padding-left: 10px;
        }
    }
</style>
